<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" size="mini" label-suffix=":">
      <el-form-item label="教材名称">
        <el-input
          v-model.trim="dataForm.bookName"
          style="width: 200px"
          placeholder="请输入关键字"
          clearable
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select
          v-model="dataForm.status"
          placeholder="请选择审核状态"
          clearable
        >
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.name"
            :value="item.status"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="createTimeRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="changeDate"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList({ current: 1 })"
          >查询</el-button
        >
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goToApply">创建申请</el-button>
      </el-form-item>
    </el-form>
    <div class="avue-form">
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        tooltip-effect="dark"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          header-align="center"
          align="center"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="book_name"
          header-align="center"
          align="center"
          label="教材名称"
        ></el-table-column>
        <el-table-column
          prop="course_name"
          header-align="center"
          align="center"
          label="课程名称"
          show-overflow-tooltip
        />
        <el-table-column
          prop="create_time"
          header-align="center"
          align="center"
          label="申请时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ parseTime(scope.row.create_time) }}</template
          >
        </el-table-column>
        <el-table-column
          prop="audit_status"
          :formatter="statusFormat"
          header-align="center"
          align="center"
          label="审核状态"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="expert_leader_opinion"
          header-align="center"
          align="center"
          label="专家组意见"
        >
          <template slot-scope="scope">
            {{ scope.row.expert_leader_opinion || "-" }}</template
          ></el-table-column
        >
        <el-table-column
          prop="president_opinion"
          header-align="center"
          align="center"
          label="院长意见"
        >
          <template slot-scope="scope">
            {{ scope.row.president_opinion || "-" }}</template
          >
        </el-table-column>
        <el-table-column
          prop="secretary_opinion"
          header-align="center"
          align="center"
          label="书记意见"
        >
          <template slot-scope="scope">
            {{ scope.row.secretary_opinion || "-" }}</template
          >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="viewDetail(scope.row.id)"
              >查看详情</el-button
            >
            <el-button
              v-if="scope.row.audit_status === 1"
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id, scope.row.audit_status)"
              >撤销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
        :current-page="dataForm.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="dataForm.size"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      ></el-pagination>
    </div>
    <el-dialog
      title="新建申请"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <ApplyFor
        ref="applyFor"
        @applyEvent="handleApplyEvent"
        @successApplyEvent="handleSuccessApplyEvent"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddDialog">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">提交申请</el-button>
      </div>
    </el-dialog>
    <el-dialog title="申请详情" width="900px" :visible.sync="dialogDetailVisible">
      <Detail
        ref="detail"
        v-if="dialogDetailVisible"
        :applyId="applyForId"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getBookApplyList,
  getAuditStatusWithdraW,
} from "@/api/bkmanage/application";
import ApplyFor from "./apply-for.vue";
import Detail from "./detail.vue";
export default {
  name: "List",
  components: { ApplyFor, Detail },
  data() {
    return {
      dataForm: {
        bookName: "",
        beginDate: "",
        endDate: "",
        // 1待审核；2审核中；3已完成
        status: "",
        current: 1,
        size: 20,
      },
      createTimeRange: "", // 查询日期
      total: 0, // 数据总条数
      // 审核状态
      statusList: [
        {
          name: "待审核",
          status: 1,
        },
        {
          name: "审核中",
          status: 2,
        },
        {
          name: "已完成",
          status: 3,
        },
        {
          name: "已拒绝",
          status: 4,
        },
      ],
      dataList: [], // 表格数据
      dataListLoading: false,
      dialogFormVisible: false, // 新建弹框是否显示
      applyForId: "", // 申请id
      dialogDetailVisible: false, // 详情弹框是否显示
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取申请列表
    getDataList(params) {
      this.dataListLoading = true;
      getBookApplyList(Object.assign(this.dataForm, params, { searchType: 1 }))
        .then((res) => {
          this.dataList = res?.rows;
          this.total = res?.total;
        })
        .finally(() => {
          this.dataListLoading = false;
        });
    },
    // 状态处理
    statusFormat({ audit_status }) {
      const statusMap = {
        1: "提交申请",
        2: "初审",
        3: "复审",
        4: "终审",
        5: "公示中",
        6: "完成",
        98: "撤销",
        99: "驳回",
      };

      return statusMap[audit_status] || "-"; // 如果audit_status不在已知键中，则返回'''
    },
    // 序号处理
    indexMethod(index) {
      return index + 1;
    },
    // 开始、结束日期
    changeDate(e) {
      if (e.length > 0) {
        this.dataForm.beginDate = e[0];
        this.dataForm.endDate = e[1];
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.getDataList({ current: 1, size: val });
    },
    // 当前页
    currentChangeHandle(val) {
      this.getDataList({ current: val });
    },
    // 重置表格
    resetForm() {
      this.dataForm = {
        bookName: "",
        beginDate: "",
        endDate: "",
        // 1待审核；2审核中；3已完成
        status: "",
        current: 1,
        size: 20,
      };
      this.getDataList();
    },
    // 查看详情
    viewDetail(applyId) {
      if (!applyId) return;
      this.applyForId = applyId;
      this.dialogDetailVisible = true;
      // this.$router.push({ path: "application/detail", query: { id: applyId } });
    },
    // 撤销申请
    deleteHandle(id, status) {
      if (status === 2) return this.$message("初审已通过，无法撤销");
      this.$confirm("确认撤销吗?")
        .then((_) => {
          getAuditStatusWithdraW({ applyId: id }).then((res) => {
            this.$message.success("操作成功");
            this.getDataList();
          });
        })
        .catch((_) => {});
    },
    // 新建申请
    goToApply() {
      this.dialogFormVisible = true;
    },
    // 点击x号关闭新建申请弹框
    handleClose() {
      this.$confirm("关闭弹窗内容不做保存，确认关闭?")
        .then((_) => {
          this.$refs.applyFor.clearAddForm();
        })
        .catch((_) => {});
    },
    cancelAddDialog() {
      this.$refs.applyFor.clearAddForm();
    },
    handleApplyEvent(data) {
      this.dialogFormVisible = data;
    },
    handleSuccessApplyEvent() {
      this.getDataList({ current: 1 });
    },
    onSubmit() {
      this.$refs.applyFor.submit();
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss"></style>
